import { useState } from "react";
import { connect } from "umi";
import treasureBoxImage from "@/assets/p1/treasureBox.png";

function TreasureBox({ items, itemId, onItemClick }) {
	const [isOpened, setIsOpened] = useState(false);

	const handleBoxClick = () => {
		setIsOpened(!isOpened);
	};

	if (!isOpened) {
		return (
			<img
				src={treasureBoxImage}
				style={{
					position: "fixed",
					top: 0,
					left: 0,
					width: "100px",
					zIndex: "2000",
				}}
				alt="Treasure Box"
				onClick={handleBoxClick}
			/>
		);
	} else {
		return (
			<div
				style={{
					position: "fixed",
					top: "10%",
					left: "30%",
					zIndex: "2000",
					backgroundColor: "white",
					padding: "40px",
					display: "flex",
					flexDirection: "column",
					backgroundColor: "#f0ded0",
					borderColor: "#c07f4b",
					borderWidth: "6px",
					borderStyle: "solid",
					borderRadius: "5px",
				}}
				onClick={handleBoxClick}
			>
				<div
					style={{
						marginLeft: "90px",
						display: "flex",
						alignItems: "center",
					}}
				>
					<img
						src={treasureBoxImage}
						alt="百宝袋"
						style={{ width: "100px" }}
					/>
					<div
						style={{
							marginLeft: "30px",
							fontSize: "55px",
							paddingTop: "10px",
						}}
					>
						我的百宝袋
					</div>
				</div>

				{items.map(item => (
					<div
						style={{
							display: "flex",
							alignItems: "center",
						}}
					>
						{item.is_displayed && (
							<div
								style={{
									display: "flex",
									alignItems: "center",
									marginBottom: "20px",
								}}
								key={item.id}
								onClick={item.id == itemId && onItemClick}
							>
								<img
									src={item.imageURL}
									alt={item.name}
									style={{ width: "100px" }}
								/>
								<div
									style={{
										marginLeft: "30px",
										marginRight: "220px",
										fontSize: "50px",
										paddingTop: "10px",
									}}
								>
									{item.name}
								</div>
							</div>
						)}
					</div>
				))}
			</div>
		);
	}
}
TreasureBox.defaultProps = {
	onItemClick: false,
};

function mapStateToProps(state) {
	return {
		items: state.treasureBox.items,
	};
}
export default connect(mapStateToProps)(TreasureBox);
